<template>
  <div class="wraper-content row justify-content-md-center" >
        <div class="col col-2">
          <div class="content">
            <h1 class="show-for-medium-up" style="font-size: 18px;">Open Access Journals</h1>
            <ul id="index-journals" class="hidden">
              <li v-for="(item,index) in journalList" :key="index">
                  <div>
                    <img :src="item.image" alt="" border="0" width="160" height="200">
                  </div>
                  <span class="impact-factor">
                    <a :href="item.hyperlink">
                      <span style="font-size:18px;font-weight:bold">
                        {{item.name}}
                      </span>
                    </a>
                  </span>
              </li>
              <br>
            </ul>
            <div class="latest-content">
            </div>
          </div>
        </div>
        <div class="col col-7 middle-bordered">
          <!-- <router-view/>
           -->
           <middle></middle>
        </div>
        <div class="col col-3">
          <div class="content">

            <!-- 结束轮播 -->
            <div class="news-content">
              <h1 class="title show-for-medium-up">
                Announcements
              </h1>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>Public Statement from the TTOA Consortium</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">4 June 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>World Electric Vehicle Association (WEVA) Collaborates with MDPI in Publishing the World Electric Vehicle Journal</strong>
                  </a>
              </div>
              <div class="generic-item news-item ">
                  <span class="text-information">31 May 2018</span>
                    <br>
                        <a class="title-link" href="#">
                        <strong>2017 CiteScore™ Metrics Released</strong>
                  </a>
              </div>
              <div class="generic-item news-item more-link">
                  <span class="text-information">>> more news &amp; announcements</span>

              </div>
            </div>
          </div>
        </div>
  </div>
</template>
<script>
import Middle from './middle'
// import axios from 'axios'
// import { logout, isPefectInfo } from '@/api/user'
import { getAllJournal } from '@/api/journal'
// const id = this.$store.state.user.id
// console.log(id)
export default {
  name: 'Content',
  components: {
    Middle
  },
  created () {
    this.initData()
  },
  data () {
    return {
      mailDialog: false,
      id: '',
      user: this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid'),
      account: '',
      password: '',
      username: '',
      email: '',
      journalList: []
    }
  },
  methods: {
    initData () {
      getAllJournal().then(res => {
        console.log(res)
        this.journalList = res.data.data
      }).catch(() => {})
      this.id = this.$store.state.user.id !== '' ? this.$store.state.user.id : localStorage.getItem('userid')
    }
  }
}
</script>

<style lang="stylus" scoped>
main-color = #4f5671;
li{
  .green{
    color rgb(43,185,5)
  }
  .orange{
    color rgb(219,0,35)
  }
  .blue{
    color rgb(78,152,214)
  }
}
.social{
  border-bottom solid 2px main-color
  display flex;
  flex-wrap: nowrap
  padding 0 10px ;
  >li{
    list-style none;
    margin 0 5px

  }
}
@font-face {
  font-family: 'iconfont';  /* project id 821377 */
  src: url('http://at.alicdn.com/t/font_821377_hijja3gu1m.eot');
  src: url('http://at.alicdn.com/t/font_821377_hijja3gu1m.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_821377_hijja3gu1m.woff') format('woff'),
  url('http://at.alicdn.com/t/font_821377_hijja3gu1m.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_821377_hijja3gu1m.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:26px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.summary-content{
  font-size: 14px;
  line-height: 19px;
  cursor: auto;
  font-style: normal;
  font-weight: 400
}
.author-link{
  color #a71a1a
}
.title-section{
  margin 8px 0
}
.title-section .artical-title{

  font-family: Helvetica,Arial;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color #333333
}
.title-section a:hover{
  color #4f5671
}
.label {
    padding: 3px 6px;
    color white;
}
.label.openaccess {
    background-color: #4f5671;
}
.label.articletype, .label.review {
    background-color: #9F1326;
}
@media (min-width: 768px){
  .container {
        max-width: 100%;
  }
}
// @media only screen and (min-width: 50.063em){
//   ul#index-journals img {
//       height: 35px;
//   }
//   .title{
//     font-size 12px
//   }
// }
.art-title{
  margin-left 30px
}
h1{
  font-family: Arial;
  font-size: 20px;
  font-weight: 400;
  color: #4f5671;
  margin-bottom: 0;
  margin-top: 0;
  padding: 5px 0;
}
.wraper-content{
  box-sizing border-box!important;
  margin-top 15px;
  padding 3px 15px
}
.wraper-content .middle-bordered{

  border-top: none!important
  border-left  1px solid #ededed;
  border-right  1px solid #ededed;
}
.wraper-content .col .content{
  border-top solid 2px #343a40;
}
.show-for-medium-up{
  padding-top 12px
  padding-left 15px
  margin-bottom 0
  font-size 18px;
  color rgb(79, 86, 113);
  font-weight 400
  font-family Arial

}
.title{
  color white
  background-color #4f5671
  vertical-align middle;
  text-align center
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: #fff;
  padding: 5px 15px;
  margin-top: 10px;
  position: relative;
  margin-bottom: -1px;
}
.generic-item {

    font-size: 12px;
    line-height: 19px;
    border-top: 1px solid #ededed;
    overflow: hidden;
    padding: 10px 15px;
}
.content .generic-item.article-item {
    padding: 15px;
    background-color: #f8f8f8;
    margin-bottom: 10px;
    -webkit-box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    -moz-box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    box-shadow: 1px 1px 3px 0 rgba(204,204,204,.75);
    margin-right: 15px;
    margin-left: 15px;
}
.news-item{
  border-top-color:rgb(237, 237, 237)

}
.news-item a {
  color black
}
.news-item a:hover{
  color #4f5671
}
.news-content .more-link{
  color:#a71a1a!important
}
#index-journals{
  list-style:none
  padding 0 15px
  margin 12px 0!important
}
#index-journals li {
  // margin-bottom 5px
}
// ul#index-journals li img {
//     max-height: 60px;
//     padding: 4px;
// }
</style>
